<template>
  <div v-if="isDataAbnormal" class="visual-abnormal-data-container" :style="boxBgColor">
    <div class="countlessData_vChart">
      <p :title="abnormalTitle" :style="getCssStyle({ fontSize: 14 })">{{ abnormalTitle }}</p>
      <p :title="abnormalMessage" :style="getCssStyle({ fontSize: 14, color: '#7F7F7F' })">{{ abnormalMessage }}</p>
    </div>
  </div>
</template>

<script>
import { getCssStyle } from '@/utils/util';
import { ABNORMAL_TYPE } from '@/utils/constant';

export default {
  props: {
    isDataAbnormal: {
      type: Boolean,
      default: true,
    },
    abnormalType: {
      type: String,
      default: ABNORMAL_TYPE.DEFAULT,
    },
    boxBgColor: {
      type: Object,
      default: () => ({
        backgroundColor: 'rgba(255,255,255,0)',
      }),
    },
  },
  computed: {
    abnormalTitle() {
      if (this.abnormalType === ABNORMAL_TYPE.INTERFACE) {
        return this.$demoi18n('message.interface.abnormal');
      }
      if (this.abnormalType === ABNORMAL_TYPE.DATA) {
        return this.$demoi18n('message.data.abnormal');
      }
      if (this.abnormalType === ABNORMAL_TYPE.FIELD) {
        return this.$demoi18n('message.dataError.checkOrchestration');
      }
      return '';
    },
    abnormalMessage() {
      if (this.abnormalType === ABNORMAL_TYPE.DATA) {
        return this.$demoi18n('message.typeError.api');
      }
      if (this.abnormalType === ABNORMAL_TYPE.FIELD) {
        return this.$demoi18n('message.dataError.withoutFields');
      }
      return '';
    },
  },
  methods: {
    getCssStyle,
  },
};
</script>

<style lang="less" scoped>
@import '../../../common/chart.less';
.visual-abnormal-data-container {
  height: max-content;
  width: 100%;
  flex: 1;
  .countlessData_vChart {
    width: 100%;
    p {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: center;
    }
  }
}
</style>
